<template>
	<view class="content">
		<view class="navbar">
			<view class="navbar__item" v-for="(item, key) in navs" :key="item" @click="currentNav = item">
				<span :class="{'--active': item === currentNav}">{{item.name}}</span>
			</view>
		</view>
		
		<view class="map-wrapper">
			<component :is="currentNav.target" :markers="markers" :lines="lines" ></component>
		</view>
	</view>
</template>

<script setup>
	import AMap from '../../component/AMap.vue'
	import LeafletMap from '../../component/LeafletMap.vue'
	import OpenLayers from '../../component/OpenLayers.vue'
	import {ref,shallowRef} from 'vue'
	import {MarkerIcon} from './../../assets/Base64Markers.js'
	const navs = [
		{ 
			name: '高德',
			target: shallowRef(AMap)
		},{
			name: 'Leaflet',
			target: shallowRef(LeafletMap),
		},{
			name: 'OpenLayers',
			target: shallowRef(OpenLayers),
		}
	]
	const currentNav = ref(navs[0])
	
	const markers = ref()
	const lines = ref()
	
	// 假装异步请求来的数据
	setTimeout(() => {
		markers.value = [
		{
			position: [116.39, 39.9],
			title: '北京A'
		},
		{
			position: [116.39, 39],
			title: '北京C'
		},
		{
			position: [116.39, 39.5],
			title: '北京B'
		},
		]
	}, 10)
	setTimeout(() => {
		lines.value = [
			{
				path: [[116.368904,39.913423], [116.382122,39.901176],[116.387271,39.912501],[116.398258,37.904600]],
				borderWeight: 40, // 线条宽度，默认为 1
				strokeColor: 'red', // 线条颜色
				lineJoin: 'round' // 折线拐点连接处样式
			}
		]
	}, 10)
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.navbar {
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 30px;
		line-height: 30px;
	}
	.navbar__item.--active {
		color: brown;
		text-decoration: underline;
	}
	.map-wrapper {
		width: 100%;
		height: calc(100vh - 30px);
	}
</style>
